<template>
  <el-dialog
    v-el-drag-dialog
    title="库存商品显示顺序编辑"
    :visible.sync="visible"
    width="700px"
  >
    <div class="listSort">
      <lb-table
        ref="lbTable"
        border
        highlight-current-row
        :column="tableData.column"
        :data="tableData.data"
      />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button
        :loading="$loadingPlugin.success"
        type="primary"
        @click="success"
      >
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { saveShowIndex } from '@/api'
  import { formatColumnMap } from '@/utils'
  export default {
    name: 'listSort',
    data() {
      return {
        visible: false,
        type: 'add',
        tableData: {
          total: 0,
          column: [
            {
              type: 'index',
              align: 'center'
            },
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsName',
              label: '商品名称'
            },
            {
              prop: 'gdStatus',
              label: '状态',

              render: (h, { row }) => (
              <span>
                {row.gdStatus &&
                  formatColumnMap(
                    this.statusMap,
                    'value',
                    row.gdStatus,
                    'desc'
                  )}
              </span>
            )
            },
            {
              label: '操作',
              width: 100,
              render: (h, scope) => {
                return (
                <div>
                  <i
                    onClick={() => {
                      this.up(scope.$index, scope.row)
                    }}
                  >
                    <svg-icon icon-class='up' />
                  </i>
                  <i
                    onClick={() => {
                      this.down(scope.$index, scope.row)
                    }}
                  >
                    <svg-icon icon-class='down' />
                  </i>
                </div>
                )
              }
            }
          ],
          data: []
        },
        statusMap: [
          { value: 1, desc: '重', key: 'HEAVY' },
          { value: 2, desc: '轻', key: 'LIGHT' },
          { value: 3, desc: '回收', key: 'RECYCLE' },
          { value: 4, desc: '故障', key: 'BROKEN' },
          { value: 5, desc: '已损坏', key: 'CORRUPT' },
          { value: 6, desc: '正常', key: 'NORMAL' },
          { value: 7, desc: '报废', key: 'SCRAPPED' },
          { value: 8, desc: '过期', key: 'EXPIRED' },
          { value: 9, desc: '问题重瓶', key: 'QUEHEAVY' }
        ]
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.tableData.data = JSON.parse(JSON.stringify(temp))
          }
        })
      },
      up(i) {
        if (i === 0) {
          return
        }
        const rows = this.tableData.data
        rows[i - 1] = rows.splice(i, 1, rows[i - 1])[0]
        rows[i].showIndex = rows[i].showIndex - 1
        rows[i - 1].showIndex = rows[i - 1].showIndex + 1
        this.setCurrentRow(rows[i - 1])
      },
      down(i) {
        const rows = this.tableData.data
        if (i === rows.length - 1) {
          return
        }
        rows[i] = rows.splice(i + 1, 1, rows[i])[0]
        rows[i].showIndex = rows[i].showIndex - 1
        rows[i + 1].showIndex = rows[i + 1].showIndex + 1
        this.setCurrentRow(rows[i + 1])
      },
      setCurrentRow(row) {
        setTimeout(() => {
          this.$refs.lbTable.setCurrentRow(row)
        }, 0)
      },
      async success() {
        const detailJson = this.tableData.data.map((item, index) => {
          return {
            ...item,
            showIndex: index
          }
        })
        await saveShowIndex({ detailJson })
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.listSort >>> .svg-icon {
  margin-left: 1rem;
  cursor: pointer;
}
</style>
